<!DOCTYPE html>





<html class="theme-next gemini" lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="generator" content="Hexo 3.9.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=7.3.0">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/CNY32x32.png?v=7.3.0">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/CNY16x16.png?v=7.3.0">
  <link rel="mask-icon" href="/images/logo.svg?v=7.3.0" color="#222">

<link rel="stylesheet" href="/css/main.css?v=7.3.0">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css?v=4.7.0">


<script id="hexo-configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '7.3.0',
    exturl: false,
    sidebar: {"position":"left","display":"post","offset":12,"onmobile":false},
    back2top: {"enable":true,"sidebar":false,"scrollpercent":true},
    save_scroll: false,
    copycode: {"enable":true,"show_result":true,"style":null},
    fancybox: false,
    mediumzoom: false,
    lazyload: false,
    pangu: false,
    algolia: {
      appID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    },
    localsearch: {"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},
    path: 'search.xml',
    motion: {"enable":false,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    translation: {
      copy_button: '复制',
      copy_success: '复制成功',
      copy_failure: '复制失败'
    }
  };
</script>

  <meta name="description" content="前言前端可以做到读写数据、切换视图、用户交互，这意味着，网页其实是一个应用程序，而不是信息的纯展示。这种单张网页的应用程序称为 SPA（single-page-application）。2010年后，前端工程师从开发页面（切模板），逐渐变成了开发“前端应用”（跑在浏览器里面的应用程序）。目前，最流行的前端框架 Vue、Angular、React 等等，都属于 SPA 开发框架。">
<meta name="keywords" content="React">
<meta property="og:type" content="article">
<meta property="og:title" content="React学习总结">
<meta property="og:url" content="localhost:4000/2019/07/30/React学习总结/index.html">
<meta property="og:site_name" content="钟浩伟的个人博客">
<meta property="og:description" content="前言前端可以做到读写数据、切换视图、用户交互，这意味着，网页其实是一个应用程序，而不是信息的纯展示。这种单张网页的应用程序称为 SPA（single-page-application）。2010年后，前端工程师从开发页面（切模板），逐渐变成了开发“前端应用”（跑在浏览器里面的应用程序）。目前，最流行的前端框架 Vue、Angular、React 等等，都属于 SPA 开发框架。">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="https://zhong-blog.oss-cn-shenzhen.aliyuncs.com/blog/20190816155645.png!blog">
<meta property="og:image" content="https://zhong-blog.oss-cn-shenzhen.aliyuncs.com/blog/20190816160033.png!blog">
<meta property="og:updated_time" content="2019-08-16T08:00:40.132Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="React学习总结">
<meta name="twitter:description" content="前言前端可以做到读写数据、切换视图、用户交互，这意味着，网页其实是一个应用程序，而不是信息的纯展示。这种单张网页的应用程序称为 SPA（single-page-application）。2010年后，前端工程师从开发页面（切模板），逐渐变成了开发“前端应用”（跑在浏览器里面的应用程序）。目前，最流行的前端框架 Vue、Angular、React 等等，都属于 SPA 开发框架。">
<meta name="twitter:image" content="https://zhong-blog.oss-cn-shenzhen.aliyuncs.com/blog/20190816155645.png!blog">
  <link rel="canonical" href="localhost:4000/2019/07/30/React学习总结/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome: false,
    isPost: true,
    isPage: false,
    isArchive: false
  };
</script>

  <title>React学习总结 | 钟浩伟的个人博客</title>
  








  <noscript>
  <style>
  .use-motion .motion-element,
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-title { opacity: initial; }

  .use-motion .logo,
  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-CN">

  <div class="container sidebar-position-left">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta">

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">钟浩伟的个人博客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
        <p class="site-subtitle">欢迎光临</p>
      
  </div>

  <div class="site-nav-toggle">
    <button aria-label="切换导航栏">
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>


<nav class="site-nav">
  
  <ul id="menu" class="menu">
      
      
      
        
        <li class="menu-item menu-item-home">
      
    

    <a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i> <br>首页</a>

  </li>
      
      
      
        
        <li class="menu-item menu-item-tags">
      
    

    <a href="/tags/" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i> <br>标签</a>

  </li>
      
      
      
        
        <li class="menu-item menu-item-categories">
      
    

    <a href="/categories/" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i> <br>分类</a>

  </li>
      
      
      
        
        <li class="menu-item menu-item-archives">
      
    

    <a href="/archives/" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i> <br>归档</a>

  </li>
      <li class="menu-item menu-item-search">
        <a href="javascript:;" class="popup-trigger">
        
          <i class="menu-item-icon fa fa-search fa-fw"></i> <br>搜索</a>
      </li>
    
  </ul>

</nav>
  <div class="site-search">
    
  <div class="popup search-popup">
  <div class="search-header">
    <span class="search-icon">
      <i class="fa fa-search"></i>
    </span>
    <div class="search-input-wrapper">
      <input autocomplete="off" autocorrect="off" autocapitalize="none"
             placeholder="搜索..." spellcheck="false"
             type="text" id="search-input">
    </div>
    <span class="popup-btn-close">
      <i class="fa fa-times-circle"></i>
    </span>
  </div>
  <div id="search-result"></div>
</div>


  </div>
</div>
    </header>

    


    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
            

          <div id="content" class="content page-post-detail">
            

  <div id="posts" class="posts-expand">
    

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="localhost:4000/2019/07/30/React学习总结/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="钟浩伟">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/profile.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="钟浩伟的个人博客">
    </span>
      <header class="post-header">

        
          <h1 class="post-title" itemprop="name headline">React学习总结

            
          </h1>
        

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              
                
              

              <time title="创建时间：2019-07-30 22:35:50" itemprop="dateCreated datePublished" datetime="2019-07-30T22:35:50+08:00">2019-07-30</time>
            </span>
          
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/前端/" itemprop="url" rel="index"><span itemprop="name">前端</span></a></span>

                
                
              
            </span>
          

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>前端可以做到读写数据、切换视图、用户交互，这意味着，网页其实是一个应用程序，而不是信息的纯展示。这种单张网页的应用程序称为 SPA（single-page-application）。<br>2010年后，前端工程师从开发页面（切模板），逐渐变成了开发“前端应用”（跑在浏览器里面的应用程序）。目前，最流行的前端框架 Vue、Angular、React 等等，都属于 SPA 开发框架。</p>
<a id="more"></a>

<h1 id="react脚手架建立工程"><a href="#react脚手架建立工程" class="headerlink" title="react脚手架建立工程"></a>react脚手架建立工程</h1><h3 id="1、安装"><a href="#1、安装" class="headerlink" title="1、安装"></a>1、安装</h3><figure class="highlight dsconfig"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">npm </span><span class="string">install </span><span class="built_in">create-react-app</span> -g</span><br></pre></td></tr></table></figure>

<h3 id="2、创建"><a href="#2、创建" class="headerlink" title="2、创建"></a>2、创建</h3><figure class="highlight dsconfig"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">create-react-app</span> <span class="string">react-demo </span> (<span class="string">react-demo项</span>目名)</span><br></pre></td></tr></table></figure>

<h3 id="3、初始化"><a href="#3、初始化" class="headerlink" title="3、初始化"></a>3、初始化</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">cd</span> react-demo</span><br></pre></td></tr></table></figure>

<figure class="highlight cmake"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm <span class="keyword">install</span>  <span class="keyword">or</span> cnpm <span class="keyword">install</span> <span class="keyword">or</span> yarn <span class="keyword">install</span></span><br></pre></td></tr></table></figure>

<h3 id="4、运行"><a href="#4、运行" class="headerlink" title="4、运行"></a>4、运行</h3><figure class="highlight crmsh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn <span class="literal">start</span></span><br></pre></td></tr></table></figure>

<h1 id="创建一个helloWorld-Demo"><a href="#创建一个helloWorld-Demo" class="headerlink" title="创建一个helloWorld Demo"></a>创建一个helloWorld Demo</h1><p>引入模块</p>
<figure class="highlight clean"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//第一步 导入react</span></span><br><span class="line"><span class="keyword">import</span> React,&#123;Component&#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">'../assets/css/index.css'</span></span><br><span class="line"><span class="keyword">import</span> logo <span class="keyword">from</span> <span class="string">'../assets/images/logo.svg'</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">'../assets/css/App.css'</span>;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 绑定原生属性注意：</span></span><br><span class="line"><span class="comment"> * class 要换成className</span></span><br><span class="line"><span class="comment"> * for 要换成htmlFor</span></span><br><span class="line"><span class="comment"> * style 要用&#123;&#125;包裹成对象 </span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//第二步，编写组件类并继承React.Component</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Home</span> <span class="keyword">extends</span> <span class="title">Component</span></span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>()&#123;</span><br><span class="line">        <span class="keyword">super</span>();</span><br><span class="line">        <span class="comment">//定义数据</span></span><br><span class="line">        <span class="keyword">this</span>.state=&#123;</span><br><span class="line">            msg:<span class="string">'你好，世界！'</span></span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="comment">//第三步，重写render()方法，用于渲染页面</span></span><br><span class="line">    render()&#123;</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">            &lt;div&gt;</span><br><span class="line">               &lt;h1&gt;&#123;<span class="keyword">this</span>.state.msg&#125;&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp">               &lt;img src=&#123;logo&#125; width='500px'&gt;&lt;/img</span>&gt;</span><br><span class="line">            &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">            </span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">        );</span></span><br><span class="line"><span class="regexp">    &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/第四步，导出该类</span></span><br><span class="line"><span class="regexp">export default Home;</span></span><br></pre></td></tr></table></figure>

<p>然后启动工程即可完成一个简单的demo</p>
<figure class="highlight crmsh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn <span class="literal">start</span></span><br></pre></td></tr></table></figure>

<p><img src="https://zhong-blog.oss-cn-shenzhen.aliyuncs.com/blog/20190816155645.png!blog" alt="20190816155645"></p>
<p>react是面向组件的，通过JSX语法来操作虚拟dom节点，如果state的数据发生了变化则会触发对应的dom的刷新。JSX语法就是，可以在js文件中插入html片段，是React自创的一种语法。JSX语法会被Babel等转码工具进行转码，得到正常的js代码再执行。所有标签必须闭合</p>
<p>注意在本地引用img等资源时，需要通过{xx}对象形式引用。如果是网络图片，直接用url引用即可。</p>
<p>JSX语法就是，可以在js文件中插入html片段，是React自创的一种语法。JSX语法会被Babel等转码工具进行转码，得到正常的js代码再执行。所有标签必须闭合</p>
<p>react 通过state来定义和绑定数据，但这种绑定并不是MVVM那种双向数据绑定，在JSX中要使用时通过 <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## 知识点：</span><br><span class="line"></span><br><span class="line">### 1. 目录结构分析</span><br><span class="line"></span><br><span class="line">![20190816155754](https://zhong-blog.oss-cn-shenzhen.aliyuncs.com/blog/20190816155754.png!blog)</span><br><span class="line">用脚手架创建的工程的目录是有些不完整的，需要补全（为了方便归档）</span><br><span class="line">component文件主要放组件，model放数据模型，App.js是默认的根组件，index.js是入口文件，相当于main，yarn.lock是项目生成的临时文件，package.json是依赖管理文件（类似maven的pom文件），nodel_modules是存放依赖包的文件夹</span><br><span class="line"></span><br><span class="line">### 2. 创建组件</span><br><span class="line"></span><br><span class="line">第一步 导入react</span><br><span class="line">第二步，编写组件类并继承React.Component</span><br><span class="line">第三步，重写render()方法，用于渲染页面</span><br><span class="line">第四步，导出该类</span><br><span class="line"></span><br><span class="line">### 3. JSX注意事项</span><br><span class="line"></span><br><span class="line">如果要在模板中嵌套多个HTML标签，需要使用一个父元素对其进行包裹</span><br></pre></td></tr></table></figure></p>
<pre><code>&lt;div&gt;
   &lt;h1&gt;{this.state.msg}&lt;/h1&gt;
   &lt;img src={logo} width=&apos;500px&apos;&gt;&lt;/img&gt;
&lt;/div&gt;</code></pre><figure class="highlight clean"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">### <span class="number">4.</span>绑定数据或对象</span><br><span class="line"></span><br><span class="line">js中定义对象用&#123;&#125;,其实就是restful风格的东东。</span><br><span class="line">类似于</span><br></pre></td></tr></table></figure>

<p>{<br>    title:”xxx”,<br>    content:”xxxx”<br>}</p>
<figure class="highlight pf"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">数据的定义用[ ]，一对方括号即可。</span><br><span class="line">在react中绑定对象只需要在<span class="keyword">state</span>中定义即可</span><br></pre></td></tr></table></figure>

<p>this.state={<br>            msg:’你好，世界！’<br>       }</p>
<figure class="highlight vala"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="meta"># 事件及数据绑定Demo</span></span><br></pre></td></tr></table></figure>

<p>import React from ‘react’</p>
<p>class Demo1 extends React.Component{<br>    constructor(props){<br>        super(props);<br>        this.state={<br>            msg:”demo1组件”,<br>            text:””,<br>            keydown:””,<br>        }<br>    }</p>
<pre><code>run=(e)=&gt;{
    alert(e.target.getAttribute(&apos;id&apos;)) //获取当前执行事件的dom节点
    e.target.style.background=&apos;red&apos;;

}

inputChange=(e)=&gt;{
    //获取表单的值
    //console.log(e.target.value);
    this.setState({
        text: e.target.value
    })
}

inputChange1=()=&gt;{
    let value = this.refs.input.value;
    this.setState({
        text: value
    })
}

getInputValue=()=&gt;{
    alert(this.state.text)
}

inputOnKeydown = (e)=&gt;{
    console.log(e.keyCode);
    this.setState({
        keydown:e.keyCode
    })
}

inputChange2 = (e)=&gt;{
    this.setState({
        text:e.target.value
    })
}

changeTextMode = (e)=&gt;{
    this.setState({
        text:&quot;改变后的model值,可以看到下面这个输入框的数据已经改变，而上面两个输入框未发生变化&quot;
    })
}

render(){
    return (
         &lt;div&gt;   
            &lt;hr&gt;&lt;/hr&gt;
            &lt;h2&gt;事件对象演示&lt;/h2&gt;       
            {this.state.msg}
            {/* 事件对象 */}
            &lt;button id=&apos;buttonId&apos; onClick={this.run}&gt;事件对象&lt;/button&gt;
            &lt;hr&gt;&lt;/hr&gt;
            &lt;h2&gt;表单事件演示&lt;/h2&gt;       
            &lt;p&gt;{this.state.text}&lt;/p&gt;
            &lt;input type=&quot;text&quot; onChange={this.inputChange}/&gt;
            &lt;button onClick={this.getInputValue}&gt;获取表单值&lt;/button&gt;
            &lt;hr&gt;&lt;/hr&gt;
            &lt;h2&gt;ref获取dom节点,获得表单值&lt;/h2&gt;    
            &lt;p&gt;{this.state.text}&lt;/p&gt;   
            &lt;input ref=&apos;input&apos; type=&quot;text&quot; onChange={this.inputChange1}/&gt;
            &lt;button onClick={this.getInputValue}&gt;获取表单值&lt;/button&gt;
            &lt;hr&gt;&lt;/hr&gt;
            &lt;h2&gt;键盘事件&lt;/h2&gt;    
            &lt;p&gt;{this.state.keydown}&lt;/p&gt;
            &lt;input type=&quot;text&quot; onKeyDown={this.inputOnKeydown}/&gt;
            &lt;hr&gt;&lt;/hr&gt;
            &lt;h2&gt;react实现双向数据绑定&lt;/h2&gt;    
            &lt;p&gt;model改变影响view(通过value属性),view改变影响model&lt;/p&gt;
            &lt;p&gt;model值：{this.state.text}&lt;/p&gt; 
            &lt;input type=&apos;text&apos; value={this.state.text} onChange={this.inputChange2}&gt;&lt;/input&gt;
            &lt;button onClick={this.changeTextMode}&gt;改变model的值&lt;/button&gt;
        &lt;/div&gt;
    )
}</code></pre><p>}</p>
<p>export default Demo1 ;</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">![<span class="string">20190816155821</span>](<span class="link">https://zhong-blog.oss-cn-shenzhen.aliyuncs.com/blog/20190816155821.png!blog</span>)</span><br><span class="line"></span><br><span class="line"><span class="section">## 知识点：</span></span><br><span class="line"></span><br><span class="line"><span class="section">### 事件绑定：</span></span><br><span class="line"></span><br><span class="line"><span class="bullet">1. </span>绑定事件需要在对应的事件响应中获得正确的this对象</span><br><span class="line">   例如：为Button 绑定了一个事件</span><br></pre></td></tr></table></figure>

<p><button id="buttonId" onclick="{this.run}">事件对象</button></p>
<figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">如果你用箭头函数写响应方法，则<span class="keyword">this</span>指向的就是react的当前组件</span><br></pre></td></tr></table></figure>

<pre><code>run=(e)=&gt;{
    alert(e.target.getAttribute(&apos;id&apos;)) //获取当前执行事件的dom节点
    e.target.style.background=&apos;red&apos;;

}</code></pre><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">如果你用的是普通写法写的函数响应</span><br></pre></td></tr></table></figure>

<pre><code>funtion run(e){
    alert(e.target.getAttribute(&apos;id&apos;)) //获取当前执行事件的dom节点
    e.target.style.background=&apos;red&apos;;
}</code></pre><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">需要使用下面这种写法传递对象指向</span><br></pre></td></tr></table></figure>

<p><button id="buttonId" onclick="{this.run.bind(this)}">事件对象</button></p>
<figure class="highlight clean"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">### 数据绑定（View-&gt;Model）</span><br></pre></td></tr></table></figure>

<p>{this.state.text}</p>
<input type="text" onchange="{this.inputChange}/">
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<pre><code>inputChange=(e)=&gt;{
    //获取表单的值，设置model的数据
    //console.log(e.target.value);
    this.setState({
        text: e.target.value
    })
}</code></pre><figure class="highlight clean"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">### 数据绑定（Model-&gt;View）</span><br></pre></td></tr></table></figure>

<p><button onclick="{this.getInputValue}">获取表单值</button></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>getInputValue=()=&gt;{<br>        alert(this.state.text) //获取model中的数据<br>  }</p>
<figure class="highlight clean"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">### 双向数据绑定（M-&gt;V&amp;V-&gt;M 俗称MVVM）</span><br></pre></td></tr></table></figure>

<h2>react实现双向数据绑定</h2>    
<p>model改变影响view(通过value属性),view改变影响model</p>
<p>model值：{this.state.text}</p> 
<input type="text" value="{this.state.text}" onchange="{this.inputChange2}">
<button onclick="{this.changeTextMode}">改变model的值</button>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">value 通过属性绑定model 完成 m-&gt;v的绑定</span><br><span class="line">通过监听onChange完成v-&gt;m的绑定 ，和上面那个View-&gt;Model的绑定是一样的。</span><br><span class="line"></span><br><span class="line"><span class="section"># TodoList小练习</span></span><br><span class="line"></span><br><span class="line">该练习的旨在熟悉双向数据绑定和react的基础用法，另外扩展了localStorage缓冲处理方案，实现刷新不会丢失数据状态。</span><br><span class="line">![<span class="string">20190816155842</span>](<span class="link">https://zhong-blog.oss-cn-shenzhen.aliyuncs.com/blog/20190816155842.png!blog</span>)</span><br></pre></td></tr></table></figure>

<p>import React, {Component}from ‘react’;<br>import Storage from ‘../model/storage’</p>
<p>class Demo3 extends Component {<br>    constructor(props) {<br>        super(props);<br>        this.state = {<br>            todo:’’,<br>            todolist:[],<br>         };<br>    }</p>
<pre><code>//生命周期函数，页面加载触发
componentDidMount=()=&gt;{
    let list = Storage.get(&apos;todolist&apos;);
    if(list){
        console.log(&quot;get:&quot;+list)
        this.setState({
            todolist:list
        })
    }
}

addTodoText=(e)=&gt;{
    this.setState({
        todo: e.target.value
    })

}
onAddBtnClick=()=&gt;{
    let todolist = this.state.todolist;

    todolist.push({
        todo:this.state.todo,
        checked:false
    })
    this.setState({
        todolist:todolist,
        todo:&quot;&quot;
    })
    //缓存数据
    Storage.set(&quot;todolist&quot;,todolist);
}

onPressEnter=(e)=&gt;{
    if(e.keyCode==13){
        this.onAddBtnClick();
    }

}

ondelBtnClick=(index)=&gt;{
    let todolist = this.state.todolist;
    todolist.splice(index,1);
    this.setState({
        todolist:todolist
    })
    //缓存数据
    Storage.set(&quot;todolist&quot;,todolist);
}

checkChange = (index)=&gt;{
    let todolist = this.state.todolist;
    todolist[index].checked=!todolist[index].checked;
    this.setState({
        todolist:todolist
    })
    //缓存数据
    Storage.set(&quot;todolist&quot;,todolist);
}

render() {
    return (
        &lt;div&gt;
            &lt;h2&gt;todoList 演示&lt;/h2&gt;

            &lt;header&gt;&lt;input type=&quot;text&quot; value={this.state.todo} onChange={this.addTodoText} onKeyDown={this.onPressEnter}/&gt; &lt;button onClick={this.onAddBtnClick}&gt;增加&lt;/button&gt;&lt;/header&gt;
            &lt;hr&gt;&lt;/hr&gt;
            &lt;h4&gt;未完成事项&lt;/h4&gt;
            &lt;ul&gt;
                {
                    this.state.todolist.map((value,index)=&gt;{
                        if(!value.checked){
                            return (
                                &lt;div key={index}&gt;
                                    &lt;input type=&apos;checkbox&apos; checked={value.checked} onChange={this.checkChange.bind(this,index) }/&gt;-----{value.todo} &lt;button onClick={this.ondelBtnClick.bind(this,index)}&gt;删除&lt;/button&gt;
                                &lt;/div&gt;
                            )
                        }

                    })
                }
            &lt;/ul&gt;
            &lt;hr&gt;&lt;/hr&gt;
            &lt;h4&gt;已完成事项&lt;/h4&gt;
            &lt;ul&gt;
            {
                    this.state.todolist.map((value,index)=&gt;{
                        if(value.checked){
                            return (
                                &lt;div key={index} className=&apos;complete&apos;&gt;
                                    &lt;input type=&apos;checkbox&apos; checked={value.checked} onChange={this.checkChange.bind(this,index) }/&gt;-----{value.todo} &lt;button onClick={this.ondelBtnClick.bind(this,index)}&gt;删除&lt;/button&gt;
                                &lt;/div&gt;
                            )
                        }

                    })
                }
            &lt;/ul&gt;
        &lt;/div&gt;
    );
}</code></pre><p>}</p>
<p>export default Demo3;</p>
<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="params">&lt;br/&gt;</span></span><br><span class="line"><span class="params">&lt;br/&gt;</span></span><br><span class="line"><span class="params">&lt;br/&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="meta"># 远程请求数据Demo</span></span><br><span class="line"></span><br><span class="line">通过axios向服务端请求数据，我这里没有通过配置代理解决跨域问题，而是在后端配置了取消CROS请求来解决跨域问题</span><br></pre></td></tr></table></figure>

<p>import React from ‘react’<br>import axios from ‘axios’<br>import request from ‘../model/server’<br>import jsonp from ‘fetch-jsonp’</p>
<p>class Demo4 extends React.Component {<br>    constructor(props) {<br>        super(props);<br>        this.state = {<br>            list:[],<br>         };<br>    }<br>     getData = ()=&gt;{<br>         let api = ‘<a href="http://localhost:18080/house/resources/findAll&#39;" target="_blank" rel="noopener">http://localhost:18080/house/resources/findAll&#39;</a><br>        axios.get(api)<br>        .then((response)=&gt;{<br>            console.log(response)<br>            this.setState({<br>                list:response.data<br>            })<br>        })<br>        .catch((error)=&gt;{<br>            console.log(error)<br>        })<br>        // let data =await request.get(api)<br>        // console.log(data)<br>    }</p>
<pre><code>render() {
    return (
       &lt;div&gt;
           &lt;h2&gt;axios获取服务器数据,未处理跨域，取消cros&lt;/h2&gt;
            &lt;button onClick={this.getData}&gt;获取服务器数据&lt;/button&gt;
            &lt;p&gt;url:&lt;a href=&apos;http://localhost:18080/house/resources/findAll&apos;&gt;http://localhost:18080/house/resources/findAll&lt;/a&gt;&lt;/p&gt;
            &lt;ul&gt;
                {
                    this.state.list.map((value,index)=&gt;{
                        return (
                            &lt;li key={index}&gt;{value.created}&lt;/li&gt;
                        )
                    })
                }
            &lt;/ul&gt;
            &lt;h2&gt;jsonp获取服务器数据,跨域请求&lt;/h2&gt;
            &lt;p&gt;怎么看，看你的地址加入callback=xxx之后是否能访问就知道是否支持jsonp了&lt;/p&gt;


       &lt;/div&gt; 
    );
}</code></pre><p>}</p>
<p>export default Demo4;</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">![<span class="string">1565942347213</span>](<span class="link">C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1565942347213.png</span>)</span><br><span class="line"></span><br><span class="line"><span class="section">## 知识点：</span></span><br><span class="line"></span><br><span class="line"><span class="section">### 1. 跨域问题</span></span><br><span class="line"></span><br><span class="line">所谓跨域问题就是 协议，域名，端口三者有其一不一致则出现跨域，一般情况下跨域是不被浏览器支持的。</span><br><span class="line"></span><br><span class="line"><span class="section">### 2. axios</span></span><br><span class="line"></span><br><span class="line">Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。</span><br><span class="line">使用</span><br></pre></td></tr></table></figure>

<p>npm install –save axios</p>
<figure class="highlight clean"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"># React-router <span class="number">4.</span>x基本配置及动态路由使用</span><br><span class="line"></span><br><span class="line">### 安装</span><br></pre></td></tr></table></figure>

<p>cnpm install react-router-dom –save</p>
<figure class="highlight clean"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">### 引入</span><br></pre></td></tr></table></figure>

<p>import {BrowserRouter as Router,Route,Link} from ‘react-router-dom’</p>
<figure class="highlight clean"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">### 基本使用：</span><br></pre></td></tr></table></figure>

<router>
         <div>
                  <header classname="header">
                          <link to="/">首页<br>
                          <link to="/news">新闻
                  </header>
         </div>
               <hr>
          <div>
                <route exact path="/" component="{Home}">
                <route path="/news" component="{News}/">
                <route path="/content/:aid" component="{Content}/">
          </route></route></route></div>
</router>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">![<span class="string">20190816155928</span>](<span class="link">https://zhong-blog.oss-cn-shenzhen.aliyuncs.com/blog/20190816155928.png!blog</span>)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">![<span class="string">20190816155957</span>](<span class="link">https://zhong-blog.oss-cn-shenzhen.aliyuncs.com/blog/20190816155957.png!blog</span>)</span><br><span class="line"></span><br><span class="line"><span class="section">### 动态路由的使用</span></span><br><span class="line"></span><br><span class="line"><span class="section">#### 定义路由</span></span><br></pre></td></tr></table></figure>

 <route path="/content/:aid" component="{Content}/">
<figure class="highlight clean"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">#### 使用路由</span><br></pre></td></tr></table></figure>

<p>{<br>       this.state.list1.map((value,key)=&gt;{<br>              return (<br>              //ES6模板字符串写法<br>              &lt;Link to={<code>/content/${value.aid}?content=${value.content}</code>} key={key}&gt;<br>              <li>{value.title}</li><br>              <br>                        )<br>         })<br>}</p>
<figure class="highlight clean"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">#### 在子组件中获得动态路由的传参</span><br></pre></td></tr></table></figure>

<p>aid:this.props.match.params.aid,</p>
<figure class="highlight clean"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">在prps.match.params中获取传参即可</span><br><span class="line"></span><br><span class="line">### 利用get实现动态路由</span><br><span class="line"></span><br><span class="line">无需定义路由格式，直接使用，在路由后面像get方法一样传参</span><br><span class="line">类似<span class="string">"?name=zhong"</span>这种</span><br><span class="line"></span><br><span class="line">#### 使用路由</span><br></pre></td></tr></table></figure>

 <link to="{`/content/${value.aid}?content=${value.content}`}" key="{key}"><li>{value.title}</li>
<figure class="highlight clean"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">其中</span><br><span class="line">**?content=$&#123;value.content&#125;** 就是使用了get传参</span><br><span class="line"></span><br><span class="line">#### 在子组件中获得动态路由的传参</span><br></pre></td></tr></table></figure>

<pre><code>componentDidMount(){
    //通过npm带的url模块解析get参数 cnpm install url --save 安装即可
    console.log(url.parse(this.props.location.search,true))
    let news = {
        aid:this.props.match.params.aid, //通过动态路由传值
        content:url.parse(this.props.location.search,true).query.content, //通过get传值
    }
    this.setState({
        news:news
    })
}</code></pre><p>```</p>
<p><img src="https://zhong-blog.oss-cn-shenzhen.aliyuncs.com/blog/20190816160033.png!blog" alt="20190816160033"></p>
</route>
    </div>

    
    
    
      


    
    <div>
      
      <div>
    
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束感谢您的阅读,如有疑问，请联系<a href="mailto:610596547@qq.com">610596547@qq.com</a>-------------</div>
    
</div>
      
    </div>
        
      

      <footer class="post-footer">
          
            
          
          <div class="post-tags">
            
              <a href="/tags/React/" rel="tag"># React</a>
            
          </div>
        

        

          <div class="post-nav">
            <div class="post-nav-next post-nav-item">
              
                <a href="/2019/07/19/SpringBoot下采用Dubbo进行服务治理/" rel="next" title="SpringBoot下采用Dubbo进行服务治理">
                  <i class="fa fa-chevron-left"></i> SpringBoot下采用Dubbo进行服务治理
                </a>
              
            </div>

            <span class="post-nav-divider"></span>

            <div class="post-nav-prev post-nav-item">
              
                <a href="/2019/08/14/计算机组成原理：系统总线总结/" rel="prev" title="计算机组成原理：系统总线总结">
                  计算机组成原理：系统总线总结 <i class="fa fa-chevron-right"></i>
                </a>
              
            </div>
          </div>
        
      </footer>
    
  </div>
  
  
  
  </article>

  </div>


          </div>
          

        </div>
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-overview">

          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image"
      src="/images/profile.jpg"
      alt="钟浩伟">
  <p class="site-author-name" itemprop="name">钟浩伟</p>
  <div class="site-description motion-element" itemprop="description"></div>
</div>
  <nav class="site-state motion-element">
      <div class="site-state-item site-state-posts">
        
          <a href="/archives/">
        
          <span class="site-state-item-count">44</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
    
      
      
      <div class="site-state-item site-state-categories">
        
          
            <a href="/categories/">
          
        
        
        
          
        
          
        
          
        
          
        
          
        
          
        
        <span class="site-state-item-count">6</span>
        <span class="site-state-item-name">分类</span>
        </a>
      </div>
    
      
      
      <div class="site-state-item site-state-tags">
        
          
            <a href="/tags/">
          
        
        
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
        <span class="site-state-item-count">15</span>
        <span class="site-state-item-name">标签</span>
        </a>
      </div>
    
  </nav>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="https://github.com/XiaoZhong233" title="GitHub &rarr; https://github.com/XiaoZhong233" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i>GitHub</a>
      </span>
    
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="mailto:601596547@qq.com" title="E-Mail &rarr; mailto:601596547@qq.com" rel="noopener" target="_blank"><i class="fa fa-fw fa-envelope"></i>E-Mail</a>
      </span>
    
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="https://blog.csdn.net/weixin_41154636" title="CSDN &rarr; https://blog.csdn.net/weixin_41154636" rel="noopener" target="_blank"><i class="fa fa-fw fa-book"></i>CSDN</a>
      </span>
    
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="http://profile.zhonghaowei.xyz/" title="Profile &rarr; http://profile.zhonghaowei.xyz/" rel="noopener" target="_blank"><i class="fa fa-fw fa-address-card-o"></i>Profile</a>
      </span>
    
  </div>



        </div>
      </div>
      <!--noindex-->
        <div class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
            
            
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#前言"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#react脚手架建立工程"><span class="nav-number">2.</span> <span class="nav-text">react脚手架建立工程</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1、安装"><span class="nav-number">2.0.1.</span> <span class="nav-text">1、安装</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2、创建"><span class="nav-number">2.0.2.</span> <span class="nav-text">2、创建</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3、初始化"><span class="nav-number">2.0.3.</span> <span class="nav-text">3、初始化</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4、运行"><span class="nav-number">2.0.4.</span> <span class="nav-text">4、运行</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#创建一个helloWorld-Demo"><span class="nav-number">3.</span> <span class="nav-text">创建一个helloWorld Demo</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#null"><span class="nav-number">3.1.</span> <span class="nav-text">react实现双向数据绑定</span></a></li></ol></li></ol></div>
            

          </div>
        </div>
      <!--/noindex-->
      



    </div>
  </aside>
  <div id="sidebar-dimmer"></div>




      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love" id="animate">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">钟浩伟</span>
</div>


<div id="days"></div>
<div class="BbeiAn-info">
   	粤ICP备 -
    <a target="_blank" href="http://beian.miit.gov.cn" style="color:#f0d784"  rel="nofollow">粤ICP备19111001号-1</a> <!--a标签中增加nofollow属性，避免爬虫出站。-->| 
	<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=" style="color:#f0d784;text-decoration:none;padding-left:30px;background:url(https://s1.ax1x.com/2018/09/29/ilmwIH.png) no-repeat left center" rel="nofollow">粤公网安备 粤ICP备19111001号-1</a>	  <!--这里将图标作为了背景，以使得能和后面的文字在同一行-->
</div>

<script>
function show_date_time(){
    window.setTimeout("show_date_time()", 1000);
    BirthDay=new Date("08/15/2019 22:40:14");
    today=new Date();
    timeold=(today.getTime()-BirthDay.getTime());
    sectimeold=timeold/1000
    secondsold=Math.floor(sectimeold);
    msPerDay=24*60*60*1000
    e_daysold=timeold/msPerDay
    daysold=Math.floor(e_daysold);
    e_hrsold=(e_daysold-daysold)*24;
    hrsold=setzero(Math.floor(e_hrsold));
    e_minsold=(e_hrsold-hrsold)*60;
    minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
    seconds=setzero(Math.floor((e_minsold-minsold)*60));
    document.getElementById('days').innerHTML="<p>小破站已运行 "+daysold+" 天 "+hrsold+" 小时 "+minsold+" 分 "+seconds+" 秒</p>";
}
function setzero(i) {
    if (i<10) {
        i="0" + i
    };
    return i;
}
show_date_time();
</script>

        








        
      </div>
    </footer>
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
          <span id="scrollpercent"><span>0</span>%</span>
        
      </div>

    

  </div>

  
  <script src="/lib/jquery/index.js?v=3.4.1"></script>

<script src="/js/utils.js?v=7.3.0"></script>

<script src="/js/schemes/pisces.js?v=7.3.0"></script>



<script src="/js/next-boot.js?v=7.3.0"></script>




  















  <script src="/js/local-search.js?v=7.3.0"></script>










<script>
if (document.querySelectorAll('pre.mermaid').length) {
  NexT.utils.getScript('//cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js', () => {
    mermaid.initialize({
      theme: 'default',
      logLevel: 3,
      flowchart: { curve: 'linear' },
      gantt: { axisFormat: '%m/%d/%Y' },
      sequence: { actorMargin: 50 }
    });
  }, window.mermaid);
}
</script>




  

  

  


  
  <script src="/js/scrollspy.js?v=7.3.0"></script>
<script src="/js/post-details.js?v=7.3.0"></script>



  
  <script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
  
<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"log":false,"model":{"jsonPath":"/live2dw/assets/assets/hijiki.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":false}});</script></body>
</html>
